<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<meta charset="utf-8" />
		<title>工具</title>	
		<script type="text/javascript">let ajax = function() {
			$.getJSON("filejson.json", function(data) {
				$.each(data, function(i, item) {
					let div = "<div class=\"card\">";
					div += "<div id=\"cardflag\" class=\"flag\"><span>" + item.cfdard + "</span></div>";
					div += "<div class=\"progress marg flag\" style=\"height: 14px;border-radius: 0;\">";
					div += "<div id=\"progress-bar\" class=\"progress-bar progress-bar-info\" role=\"progressbar\"";
					div += "aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\"";
					div += "style=\"width: " + item.per + "%;\">";
					div += "<span class=\"sr-only\">90% 完成（成功）</span>";
					div += "</div>";
					div += "</div>";
					div += "<div class=\"flag flags\"><span>" + item.freeSize + "G可用，共" + item.totalSize + "G</span></div>";
					div += "</div>";
					$(".cardbox").append(div);
				});
			});
		}
		$(document).ready(ajax());</script>
	</head>
	<body>
		<div class="box">
			<div class="cardbox"></div>
		</div>
	</body>
</html>
